<!--ljx 2022.9.1 测试页面  -->
<template>
    <div class='ljxback'>
			<el-row :gutter="20">
				   <el-col :span="2"/>
			  <el-col :span="5" >
					<myleft></myleft>
				</el-col>
			  <el-col :span="15">
					<div style="width: 800px;text-align: center;display: inline-block;">
						<div style="display: flex;height: 530px;">
							<div class="left">

								<div class="img">
									<img :src="newgood.img" class="img" />
								</div>
								<div style="display: flex;">
									<img src="/a1.jpg" class="img1" @click="selectimg('1')" />
									<img src="/a2.jpg" class="img1" @click="selectimg('2')" />
									<img src="/a3.jpg" class="img1" @click="selectimg('3')" />
									<img src="/a4.jpg" class="img1" @click="selectimg('4')" />
								</div>
							</div>
							<div class="right">
								<div class="info-item">
									<div class="info-item-title">
										产品名称
									</div>
									:
									<div class="info-item-content">
										{{newgood.title}}
									</div>
								</div>
								<div class="info-item">
									<div class="info-item-title">
										产品描述
									</div>
									:
									<div class="info-item-content">
										{{newgood.describe}}
									</div>
								</div>
								<div class="info-item">
									<div class="info-item-title">
										产品价格
									</div>
									:
									<div class="info-item-content">
										{{newgood.price}}
									</div>
								</div>
								<div class="info-item">
									<div class="info-item-title">
										产品数量
									</div>
									:
									<div class="info-item-content">
										{{newgood.num}}
									</div>
								</div>
								<div class="info-item">
									<div class="info-item-title">
										产品说明
									</div>
									:
									<div class="info-item-content">
										{{newgood.memo}}
									</div>
								</div>
							</div>
						</div>
						<div style="text-align: center;">
							<button type="button" @click="cart()" class="button">加入购物车</button>
							<button type="button" @click="closed()" class="button">返回</button>
						</div>

						<div>
							<div style="display: flex;margin-top: 20px;">
								<div class='mytitle'> <router-link :to="{name:'goodsrelate',query:{goodtype:'热销水果'}}">热销水果1</router-link>
								</div>
								<div class='mytitle' @click="gotoPage(0)"> 热销水果2</div>
								<div class='mytitle' @click="gotoPage(1)"> 当季水果</div>
								<div class='mytitle' @click="gotoPage(2)"> 养生水果</div>
								<div class='mytitle' @click="gotoContent()"> 热销水果新窗口</div>
							</div>
							<hr />
							<router-view></router-view>
						</div>

					</div>
				</el-col>
				 <el-col :span="2"/>
			</el-row>
    </div>
</template>


<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';
	//import bbb1 from './bbb1.vue'
  import myleft from '../components/myleft.vue'
	export default {
		data() {
			//这里存放数据
			return {
				msg: '测试数据',
				idRouterAlive: true,
				myimg: '',
				newgood: {
					img: "/a1.jpg",
					title: "测试",
					memo: "新产品",
					describe:'',
					price: 121,
					num: 3,
					goodclass: '无'
				},
			};
		},
		//import引入的组件需要注入到对象中才能使用
		components: {
			myleft
		},
		//监听属性 类似于data概念
		computed: {},
		//监控data中的数据变化
		watch: {},
		//方法集合
		methods: {

			gotoPage(id) {
				var pageName = '';
				if (id == 0) {
					pageName = "热销水果"
				}
				if (id == 1) {
					pageName = "当季水果"
				}
				if (id == 2) {
					pageName = "养生水果"
				}
				console.log(pageName)

				this.$router.push({
					path: '/indexcontent/goodsrelate',
					query: {
						type: id,
						goodtype: pageName
					}
				})

			},
			cart() {
				let username = sessionStorage.getItem("username");
				console.log('username',username);
				if(username == undefined)
				{
					console.log('in list');
					this.$router.push('/loginT');
					return;
				}
				// alert('已加入购物车！')
				let goodobj = {
				  id: 0,
				  goodid:this.newgood.id,
				  title: this.newgood.title,
				  mydescribe:this.newgood.describe,
				  price: this.newgood.price,
				  num: this.newgood.num,
				  img: this.newgood.img,
				  memo: this.newgood.memo,
				  clicknum: 0,
				  goodtype: '',
				  createBy: this.$store.state.loginName,
				  remark: '',
				  status: '未提交'
				};

				this.execdata('/system/cart', goodobj).then(response => {
					// console.log('添加成功：', goodobj);
					 alert('已加入购物车！')
				});
			},
			selectimg(val) {
				this.newgood.img = "/a" + val + ".jpg";
			},
			closed() {
				this.$router.go(-2);
			},
			gotoContent() {
				let routeUrl = this.$router.resolve({
					path: '/goodsrelate',
					query: {
						goodtype: '热销水果'
					}
				})
				console.log('22', routeUrl.href);
				window.open(routeUrl.href, '_blank');

			},

		},
		//生命周期 - 创建完成（可以访问当前this实例）
		created() {

		},
		//生命周期 - 挂载完成（可以访问DOM元素）
		mounted() {
			console.log('this.$route.query.id',this.$route.query.id);
			if(this.$route.query.id == undefined)
				return;

			this.getdata('/system/goodtable/'+this.$route.query.id, '').then(response => {
				console.log(response);
				if(response.code == 200)//正确读取到数据再渲染
				{
						this.newgood.id = response.data.id;
						this.newgood.title = response.data.title;
						this.newgood.describe = response.data.mydescribe;
						this.newgood.price = response.data.price;
						this.newgood.num = response.data.num;
						this.newgood.img = 'http://localhost/dev-api' + response.data.img;
						this.newgood.memo = response.data.memo;
						console.log('this.newgood',this.newgood);
				}

				// this.goodslist = response.data.list;
			});

			this.gotoPage(0);
		},
		beforeCreate() {}, //生命周期 - 创建之前
		beforeMount() {}, //生命周期 - 挂载之前
		beforeUpdate() {}, //生命周期 - 更新之前
		updated() {}, //生命周期 - 更新之后
		beforeDestroy() {}, //生命周期 - 销毁之前
		destroyed() {}, //生命周期 - 销毁完成
		activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	.machine-list-card {
		width: 1050px;
		height: 530px;
		/* margin: 5px auto; */
		display: flex;
		flex-direction: row;
		background-color: #FFFFFF;
		border-radius: 10px;
		box-shadow: 5px 5px 10px rgba(160, 160, 160, 0.3);
		margin-bottom: 10px;
		margin-right: 10px;
	}

	.mytitle {
		width: 120px;
		height: 40px;
		background-color: seashell;
		/* display: flex; */
		justify-content: center;
		align-items: center;
		padding-top: 10px;
		margin-left: 4px;
	}

	.left {
		width: 460px;
		height: 400px;
		/* display: flex; */
		justify-content: center;
		align-items: center;
	}

	.button {
		width: 100px;
		height: 40px;
		margin-left: 30px;
		background-color: #8b8c33;
		color: white;
		/* display: flex; */
		justify-content: center;
		align-items: center;
	}

	.right {
		width: 700px;
		height: 400px;
		padding: 10px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-around
	}
	.ljxback {
		background-color:#fbfdf8;

	}
	.img {
		width: 450px;
		height: 390px;
	}

	.img1 {
		width: 100px;
		height: 100px;
		margin-right: 12px;
	}

	.img image {
		width: 380px;
		height: 380px;
	}

	.info-item {
		display: flex;
		white-space: nowrap;
	}

	.info-item-title {
		/* font-weight: bold; */
		font-size: 16px;
		width: 4em;
		text-align: justify;
		text-align-last: justify;

	}

	.info-item-content {
		margin-left: 10px;
		font-size: 16px;
		word-wrap: break-word;
		white-space: normal;
		text-align: left;
		/* overflow: hidden; */
	}
</style>
